<template>
  <div>
    <div class="university-info">
      <div class="university-info-left">
        <img class="school-logo" :src="detail.logo" alt="">
        <div>
          <p class="school-name">{{detail.name}}</p>
          <p class="address">{{detail.provinceName}} {{detail.regionName}}</p>
          <div class="label-box">
            <span
              :key="'property'+index"
              v-for="(property, index) in detail.propertyList"
              class="ghost-label">{{property}}</span>
          </div>
        </div>
      </div>
      <div class="university-info-right">
        <p>院校类型：<span>{{detail.schoolTypeName}}</span></p>
        <p>办学层次：<span>{{detail.schoolLevel}}</span></p>
        <p>招生代码：<span>{{detail.schoolCode}}</span></p>
        <p>官方电话：<span>{{detail.phone}}</span></p>
        <p>官方网址：<a :href="detail.url"><span>{{detail.url}}</span></a></p>
      </div>
    </div>
    <section class="content mt50">
      <div class="university-desc">
        <div class="university-desc-text">
          <div class="border-title">学校介绍</div>
          <div class="university-desc-box">
            <!-- 实力概述 -->
            <div class="university-desc-header-title">实力概述</div>
            <div class="university-desc-label">
            <span
              :key="'info'+index"
              v-for="(info, index) in detail.infoList"
              class="grey-label" style="background: #F5F6F7">{{info}}</span>
            </div>
            <div class="university-desc-header-title">学校简介</div>
            <div style="color:#646A73;" v-html="detail.content"></div>
          </div>
        </div>
        <div class="university-desc-news">
          <div class="border-title">学校动态</div>
          <div class="university-desc-news-box">
            <div @click="onNewsClick(news.html)" class="university-desc-news-card" v-for="(news, index) in newList" :key="'news'+index">
              <img :src="news.img" alt="">
              <div class="text">
                <p class="title clamp2-ellipsis">{{news.title}}</p>
                <p class="time">{{news.openDate | formatDate}}</p>
              </div>
            </div>
          </div>
          <el-pagination
            small
            class="mt50 pagination"
            @current-change="onCurrentChange"
            :pager-count="5"
            :current-page="pageNo"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            background
            :total="total">
          </el-pagination>
        </div>
      </div>
    </section>

  </div>
</template>
<script>
const propMap = new Map([
  ['academicianNum', '院士数量'],
  ['laboratory', '国家重点实验室'],
  ['subjectNum', '一流学科数量'],
  ['doctorPlaceNum', '博士点数量'],
  ['academicianPlaceNum', '硕士点数量'],
  ['bkStudyRadio', '本科总深造率'],
  ['sexRadio', '男女比例'],
  ['studentNum', '学生人数'],
  ['bkPay', '本科毕业生平均薪资'],
  ['floorSpace', '校园面积'],
  ['studyRate', '留学率'],
])

export default {
  name: 'UniversityInfoDetail',
  data () {
    return {
      id: '',
      important: {}, // 高考避雷针
      pastLiveList: [], // 往期直播
      publicityList: [], // 学校宣传片
      introList: [], // 专业介绍片
      detail: {},
      pageNo: 1,
      pageSize: 10,
      total: 0,
      newList: [{}]
    }
  },
  mounted () {
    this.id = this.$route.query.id
    this.getDetail()
    this.getNewList()
  },
  methods: {
    onNewsClick (url) {
      window.open(url)
    },
    onCurrentChange (val) {
      this.pageNo = val
      this.getNewList()
    },
    getNewList () {
      // ??? 点击跳转字段是哪个
      this.$http.get('/schoolController/listNews', {
        id: this.id,
        pageNum: this.pageNo,
        pageSize: this.pageSize,
      }).then(value => {
        this.newList = value.list
        this.total = value.total
      })
    },
    getDetail () {
      // ??? 返回值没有学校名称字段和学校视频
      this.$http.get('/schoolController/getSchoolDetailById', { id: this.id })
        .then(value => {
          const { property, schoolWay, ...other } = value
          let propertyList = []
          if (property) {
            propertyList = property.split(',')
          }
          this.detail = {
            propertyList: propertyList,
            schoolLevel: this.getSchoolLevel(schoolWay),
            infoList: this.getInfoList(value),
            ...other
          }
        })
    },
    getSchoolLevel (schoolWay) {
      return ['本科', '专科'][Number(schoolWay)]
    },
    getInfoList (value) {
      return Object.entries(value)
        .reduce((pre, cur) => {
          const [key, value] = cur
          if (propMap.get(key) && value !== null) {
            const temp = propMap.get(key) + value
            return [...pre, temp]
          }
          return pre
        }, [])
    }
  }
}
</script>

<style scoped lang="less">
  .grey-label {
    display: inline-block;
    background: #EFF0F1;
    border-radius: 100px;
    font-size: 14px;
    color: #646A73;
    padding: 3px 10px;
    margin-left: 12px;
    margin-bottom: 10px;
  }

  .ghost-label {
    display:inline-block;
    border: 1px solid #007EFA;
    border-radius: 13px;
    font-size: 14px;
    color: #007EFA;
    padding: 3px 8px;
    margin-left: 12px;
    margin-top:12px
  }

  .university-info {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 24px 20px;
    background: #F5F6F7;

    .university-info-left {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .school-logo {
        width: 108px;
        height: 108px;
        border-radius: 50%;
        margin-right: 15px;
      }

      .school-name {
        font-size: 30px;
        color: #1F2329;
      }

      .address {
        color: #9CA2A9;
        margin-top: 7px ;
      }

      .label-box {
        margin-left: -12px;
      }
    }
  }

  .university-info-right {
    flex: 0.8;
    padding-left: 100px;

    p {
      color: #9CA2A9;
      padding: 8px 0;
    }
    a:hover span{color: #FF6B51}
    span {
      color: #646A73;
    }
  }

  .border-title {
    font-size: 22px;
    color: #1F2329;
  }

  .university-desc {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

    .university-desc-text {
      width: 866px;

      .university-desc-header-title {
        font-size: 22px;
        color: #1F2329;
        margin-top: 24px;
        margin-bottom: 15px;
      }

      .university-desc-label {
        margin-left: -12px;
      }
    }

    .university-desc-box {
      border-top: 1px solid #EFF0F1;
      margin-top: 12px;
    }

    .university-desc-video {
      width: 570px;
      height: 322px;
      margin: 24px 0;
    }

    .university-desc-news {
      width: 455px;
      margin-left: 80px;
    }

    .university-desc-news-box {
      border-top: 1px solid #EFF0F1;
      margin-top: 12px;
    }

    .university-desc-news-card {
      cursor: pointer;
      margin-top: 24px;
      padding: 10px;
      display: flex;
      &:hover{
        background: #F5F6F7;
      }
      &:hover .title{
        color: #FF6B51;
      }
      img {
        width: 120px;
        height: 90px;
      }
      .text {
        width: 305px;
        margin-left: 30px;
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .title {
        color: #373C43;
      }

      .time {
        font-size: 14px;
        color: #9CA2A9;
      }
    }
  }
</style>
